<template>
	<view class="pop animated fadeIn faster"  @touchmove.stop.prevent="movehandle"  v-if="show">
		<view class="box animated fadeInDown fast">
			<moveVerify @result='verifyResult' ref="verifyElement"/>
		</view>
		
		<view class="guanbi" @tap="clonebox"/>
	</view>
</template>

<script>
	import moveVerify from "@/components/helang-moveVerify/helang-moveVerify.vue"
	export default {
		components: {
			moveVerify,
		},
		props: {
			show: {
				type: Boolean,
				default: ()=>false
			},
		},
		methods: {
			movehandle(){},
			clonebox(){
				this.$emit('update:show',false)
			},
			verifyResult(e){
				if(e.flag){
					this.$emit('validSuccess',e)
					this.$refs.verifyElement.reset();
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.pop{
		position:fixed;
		width: 100vw;
		height: 100%;
		background-color: rgba($color: #000000, $alpha: .6);
		z-index: 9;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.box{
			width: 600rpx;
			height: auto;
		}
		
		.guanbi{
			width: 68rpx;
			height: 68rpx;
			border-radius: 50%;
			border: 2rpx solid #eee;
			margin-top: 40rpx;
			position: relative;
			
			&::after,&::before{
				content: '';
				display: block;
				width: 4rpx;
				height:36rpx;
				background-color: #eee;
				font-size: 30rpx;
				position: absolute;
				left: 50%;
				top: 50%;
			}
			&::after{
				transform:translate(-50%,-50%) rotate(-45deg);
			}
			
			&::before{
				transform:translate(-50%,-50%) rotate(45deg);
			}
		}
	}
</style>
